<template>
    <div class="not-open">
        <img src="@/assets/image/account/Group.png" />
        <div>若要开通达人订单转换功能，请<span @click="handleSvcDialog">联系客服</span></div>
        <el-dialog v-model="svcDialogVisible" class="transform-svc-dialog" title="联系客服" width="25%" align-center>
            <div class="transform-svc-dialog-body">
                <el-image class="service" src="//static.scrm.keyid.cn/assets/images/global/service.png"></el-image>
                <p style="text-align: center">请使用微信或企业微信扫码联系我们</p>
                <p style="text-align: center">
                    <el-icon><Clock /></el-icon>工作日：9:00~20:00
                </p>
            </div>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const svcDialogVisible = ref(false);
const handleSvcDialog = () => {
    svcDialogVisible.value = true;
};
</script>

<style lang="scss">
.transform-svc-dialog {
    .transform-svc-dialog-body {
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;

        p {
            margin: 20px 0;
            color: #333;

            &:last-of-type {
                margin: 0;
                margin-bottom: 40px;
                display: flex;
                align-items: center;
                color: #969696;

                i {
                    margin-right: 4px;
                }
            }
        }
    }
}
</style>
<style lang="scss" scoped>
.not-open {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-family: PingFangSC-Regular, 'PingFang SC';
    font-weight: 400;
    color: #969696;

    img {
        width: 80px;
        height: 55px;
        margin-bottom: 11px;
    }

    span {
        color: #ff6b00;
        cursor: pointer;
    }
}
</style>
